<template>
	<view>
		<view class='sign-record' style="padding: 0 20rpx">
			<view class='list'>
				<view class='item'>
					<view class='listn'>
						<view class='itemn acea-row row-between-wrapper' v-for="(itemn,indexn) in signList"
							:key="indexn">
							<view>
								<view class='name line1'>{{returnTypename(itemn.type)}}</view>
								<view class="c_9 f_22">{{getTimeAgo(itemn.updateTime)}}</view>
							</view>
							<view class="flex flex-col justify-end ">
								<view v-if="itemn.type == 1" class='num font-color'>-{{itemn.amount}}次</view>
								<view v-if="itemn.type == 2" class='num font-color-red'>{{returnNumber(itemn)}}</view>
								<view v-if="itemn.type == 3|| itemn.type == 4 || itemn.type == 5" class='num font-color-red'>+{{itemn.amount}}次</view>
								<view class="c_9 f_22">{{returnBalance(itemn.balanceNumber)}}</view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<view class='loadingicon acea-row row-center-wrapper' v-if="signList.length > 0"
				style="color:#999;margin-top: 20rpx;font-size: 24rpx;">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadtitle}}
			</view>
		</view>
		<view class="fixedbtn flex flex-row justify-between  u-fixed-bottom">
			<view class="btn background_red" :class="{'mb_20': !isIPhoneX}" @click="exchange">积分兑换(100兑1次)</view>
			<view class="btn background_red" :class="{'mb_20': !isIPhoneX}" @click="buy">购买次数</view>
		</view>

		<!-- 购买弹框 -->
		<uni-popup ref="buypopup">
			<view class="buylist">
				<view class="buy-title flex flex-row justify-end items-center">
					<!-- <text class="f_30 c_0">购买</text> -->
					<image class="close_icon" src="@/static/mine/close.svg" mode="widthFix" @click="close"></image>

				</view>
				<view class="flex flex-row justify-between items-center ">
					<view class="buyitem flex flex-col justify-center items-center" v-for="(item,index) in buylist" :key="index" :class="index == activeIndex?'buyactive' :''" @tap="itemClick(item, index)">
						<view class="mt_10" >
							<text class="f_32 c_0">{{item.type}}</text>
						</view>
						<view class="flex flex-row  justify-center items-center red mt_10" >
							<text class="f_30 red">￥</text>
							<text class="f_50 red">{{item.money}}</text>
						</view>
						<view class="tag flex justify-center items-center">
							<text class="red">{{item.desc}}</text>
						</view>
						<view class="abtag">{{item.yh}}</view>
					</view>
				</view>
				<view class="notice">
					<view class="notice-title">购买须知</view>
					<view class="notice-content">1、本商品为《一起中》小程序用户抽奖次数充值</view>
					<view class="notice-content">2、充值成功后，在【我的】界面查看次数</view>
					<view class="notice-content"> 3、虚拟商品，无法退货，请谨慎购买</view>
				</view>
				<view class="fixedbtn1 flex flex-row justify-between  u-fixed-bottom">
					<view class="btn background_red" :class="{'mb_20': !isIPhoneX}"  @click="buyTime('yue')" >余额购买</view>
          <view class="btn background_red" :class="{'mb_20': !isIPhoneX}"  @click="buyTime('weixin')" >微信购买</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		timeExchange
	} from '@/api/api.js';
	import { drawBuytime,drawtimelist } from '@/api/activity.js'
	import { getTimeAgo } from '../../utils/index'
	import {
		wechatQueryPayResult,
	} from '@/api/order.js';
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				 isIPhoneX:this.isIPhoneX,
				activeIndex: 0,
				buylist: [{
						money: '9.9',
						yh: '限时特惠',
						type: '20次',
						desc: '不限使用时间',
						buyType: 1
					},
					{
						money: '26.9',
						yh: '限时特惠',
						type: '60次',
						desc: '不限使用时间',
						buyType: 4
					},
					{
						money: '39.9',
						yh: '限时特惠',
						type: '100次',
						desc: '不限使用时间',
						buyType: 5
					},
				],
				loading: false,
				loadend: false,
				loadtitle: '加载更多',
				page: 1,
				limit: 10,
				signList: [
				],
        buyType: 1,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false //是否隐藏授权
			};
		},
		computed: mapGetters([ "userInfo"]),
		onLoad() {
			this.getList();
		},
		onReachBottom: function() {
			this.page++
			this.getList();
		},
		onPullDownRefresh() {
		  this.page = 1
		  this.loadend = false
		  this.signList = []
		   this.getList();
		    setTimeout(function () {
		      uni.stopPullDownRefresh();
		    }, 1000);
		  },
		methods: {
			exchange () {
				if (this.userInfo.integral < 100) {
					return uni.showToast({
						title: '积分不足',
						icon: 'none'
					})
				}
				let count = parseInt(this.userInfo.integral / 100)
				let fen = count * 100
				let that = this
				uni.showModal({
						title:'提示',
						content:`确定要使用${fen}积分兑换${count}次抽奖机会吗`,
						success: (res) => {
              if(res.confirm) {
                that.getTime(count)
              }
						}
					})
			},
			getTime(time) {
				timeExchange({
					time
				}).then(res => {
					uni.showToast({
						title: '兑换成功',
						icon: 'none'
					})
					this.$store.dispatch('USERINFO');
				})
			},
			returnBalance(e) {
				if(e){
					return "剩余:" + e +'次'
				}
				if (this.userInfo.drawVipEndTime) {
					return '不限次使用至' + this.userInfo.drawVipEndTime
				}
			},
			returnNumber(item) {
				if (item.buyType==1) return '+' + item.number + '次'
				if (item.buyType==2) return '包周'
				if (item.buyType==3) return '包月'
			},
			returnTypename(type) {
				if (type == 1) return '参与抽奖使用'
				if (type == 2) return '购买次数充值'
				if (type == 3) return '平台奖励赠送'
				if (type == 4) return '积分兑换'
				if (type == 5) return '抽奖返回'
			},
			itemClick(item, index) {
				this.activeIndex = index
				this.buyType = item.buyType
			},
			close(){
				this.$refs.buypopup.close('bottom')
			},
			// 购买
			buy(){
				this.$refs.buypopup.open('bottom')
			},
			buyTime(payType) {
				uni.showLoading({
					title: 'loading...'
				})
				let that = this
				drawBuytime({
					buyType: this.buyType,
					payType
				}).then(res => {
					let jsConfig = res.data.jsConfig;
					let orderNo = res.data.orderNo
					switch (res.data.payType) {
						case 'weixin':
							uni.requestPayment({
								timeStamp: jsConfig.timeStamp,
								nonceStr: jsConfig.nonceStr,
								package: jsConfig.packages,
								signType: jsConfig.signType,
								paySign: jsConfig.paySign,
								ticket: jsConfig.ticket,
								success: function() {
									uni.hideLoading();
									wechatQueryPayResult(orderNo).then(res => {
										uni.hideLoading();
										console.log(res)
										if (res.data) {
											that.$store.dispatch('USERINFO');
										}
									}).catch(err => {
										uni.hideLoading();
										return that.$util.Tips({
											title: err
										});
									})
								
								},
								fail: function(e) {
									uni.hideLoading();
									return uni.showToast({
										title: '支付失败',
										icon: 'none'
									})
								},
								complete: function(e) {
									uni.hideLoading();
								},
							})
            case 'yue':
            	uni.hideLoading();
            	return that.$util.Tips({
            		title: err
            	});
            	break;
					}
				})
			},
			// 动态显示时间值
			getTimeAgo(dateTime) {
				return getTimeAgo(dateTime)
			},
			/**
			 * 获取签到记录列表
			 */
			getList: function() {
				let that = this;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadtitle = "";
				drawtimelist({
					page: that.page,
					limit: that.limit
				}).then(res => {
					
					let list = res.data.list;
					let loadend = list.length < that.limit;
					that.signList = that.signList.concat(list)
					that.$set(that, 'signList', that.signList);
					that.loadend = loadend;
					that.loading = false;
					that.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多"
				}).catch(err => {
					that.loading = false;
					that.loadtitle = '加载更多';
				});
			},
		}
	}
</script>

<style lang="scss">
	.buylist{
		background: #fff;
		padding: 30rpx ;
		padding-bottom: 0;
		.buy-title{
			padding: 20rpx 0;
		}
		.buyactive {
			border-color: #DF4B43!important;
		}
		.buyitem{
			width: 214rpx;
			margin: 20rpx 0;
			padding-top: 40rpx;
			height: 280rpx;
			border:2rpx solid #e8e8e8;
			border-radius:24rpx;
			position: relative;
			.tag{
				margin-top:10rpx;
				background-color: #FFEDC2;
				width: 85%;
				height: 50rpx;
				border-radius: 100rpx;
				font-size: 18rpx;
			}
			.abtag{
				position: absolute;
				width: 134rpx;
				height: 46rpx;
				padding: 8rpx 18rpx;
				border-radius: 0px 10px;
				background: #F54C30;
				color: #fff;
				font-size: 22rpx;
				right: 0;
				top: 0;
			}
		}
	}
	.tag{
		text{
			font-size: 18rpx;
		}
	}
	.close_icon {
		width: 34rpx;
	}
.fixedbtn1 {
		width: 100%;
		
		border-top: 1rpx solid #D9D9D9;
		background-color: #fff;
		z-index: 9;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.btn {
			margin-top: 20rpx;
			width: 90%;
			margin-left: 5%;
			height: 90rpx;
			border-radius: 200px;

			text-align: center;
			display: flex;

			justify-content: center;
			align-items: center;

		}
	}

	.fixedbtn {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1rpx solid #D9D9D9;
		background-color: #fff;
		z-index: 9;
		padding-top: 24rpx;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

		.btn {
			margin-top: 20rpx;
			width: 96%;
			margin: 0 2%;
			height: 90rpx;
			border-radius: 200px;

			text-align: center;
			display: flex;

			justify-content: center;
			align-items: center;

		}
	}

	.list {
		border-radius: 20rpx;
		background-color: #fff;
		overflow: hidden;
	
	}

	.sign-record {
		width:100%;
		display:inline-block;
		
		margin: 20rpx auto;
		margin-bottom: 150rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.sign-record .list .item .data {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		color: #666;
	}

	.sign-record .list .item .listn {
		font-size: 24rpx;
		color: #999;
		background-color: #fff;
	}

	.sign-record .list .item .listn .itemn {
		border-bottom: 1rpx solid #f7f7f7;
		padding: 40rpx 24rpx;
	}

	.sign-record .list .item .listn .itemn .name {
		width: 390rpx;
		font-size: 28rpx;
		color: #282828;
		margin-bottom: 10rpx;
	}

	.sign-record .list .item .listn .itemn .num {
		font-size: 36rpx;
		font-family: 'Guildford Pro';
		color: #2A9F17;
	}

	.font-color-red {
		color: #DF4B43 !important
	}
	.notice {
		&-title {
			font-size: 30rpx;
			color: #282828;
			margin-bottom: 10rpx;
		}
		&-content {
			font-size: 24rpx;
			color: #282828;
		}
	}
</style>